<template>
    <div class="main-scrollbar">
        <div class="dashboard-columns">
            <div class="dashboard-column">
                <div class="dashboard-column-label">问卷总数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-group"></i>
                    {{ answer_total || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">今日问卷新增</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-line-chart"></i>
                    {{ day_answer_total || 0 }}
                </div>
            </div>
            <!-- <div class="dashboaard-column">
                <div class="dashboard-column-label">今日问卷新增</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-line-chart"></i>
                    {{ day_answer_total || 0 }}
                </div>
            </div> -->
            <div class="dashboard-column">
                <div class="dashboard-column-label">待办总数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-sitemap"></i>
                    {{ db_total || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">今日新增待办</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-object-group"></i>
                    {{ day_db_total || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">有效工单总数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-file-text"></i>
                    {{ yx_total || 0 }}
                </div>
            </div>
        </div>
        <div class="dashboard-charts">
            <v-chart class="dashboard-chart" :option="option1" autoresize></v-chart>
            <v-chart class="dashboard-chart" :option="option2" autoresize></v-chart>
        </div>
    </div>
</template>

<script>
import { get, post } from "@/assets/js/http.js";

export default {
    name: "view-dashboard",
    data() {
        return {
            answer_total: 0,
            db_total: 0,
            day_db_total: 0,
            day_answer_total: 0,
            yx_total: 0,
            option1: {
                color: ["#80FFA5"],
                title: {
                    text: "近七天问卷新增情况"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "数量",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: "#80FFA5"
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: []
                    }
                ]
            },
            option2: {
                color: ["#409EFF"],
                title: {
                    text: "近七天有效工单新增"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "数量",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: "#409EFF"
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: []
                    }
                ]
            }
        };
    },
    mounted() {
        this.getColumnsData();
        this.getUserRole()
    },
    methods: {
        async getColumnsData() {
            const result = await post({
                url: "/admin/answer.Subject/census",
                params: {}
            });
            this.answer_total = result.answer_total;
            this.day_answer_total = result.day_answer_total;
            this.db_total = result.db_total;
            this.day_db_total = result.day_db_total;

            this.yx_total = result.yx_total;
            this.option1.xAxis[0].data = result.q_total.time;
            this.option2.xAxis[0].data = result.q_gd_total.time;
            this.option1.series[0].data = result.q_total.count;
            this.option2.series[0].data = result.q_gd_total.count;
        },
        getUserRole() {
            post({
                url: "/admin/answer.Subject/adminuser_info"
            }).then(res => {
                console.log(res);
                localStorage.setItem("role", res.role);
                localStorage.setItem("id", res.id);
                localStorage.setItem("userList", JSON.stringify(res));

            })
        }
    }
};
</script>

<style scoped>
.main-scrollbar {
    background-color: white;
}

.dashboard-columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.dashboard-column {
    width: 19%;
    min-width: 19%;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0px 0px 3px 0px rgba(150, 150, 150, 0.35);
    background-color: white;
}

.dashboard-column:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 10px 5px rgba(150, 150, 150, 0.35);
}

.dashboard-column-label {
    color: #92969a;
    font-size: 15px;
    margin: 20px;
}

.dashboard-column-value {
    font-size: 28px;
    color: #2c3f5d;
    margin: 20px;
}

.dashboard-column i {
    font-size: 20px;
    margin-right: 10px;
}

.dashboard-column:nth-child(1) i {
    color: rgb(133, 149, 244);
}

.dashboard-column:nth-child(2) i {
    color: rgb(173, 133, 244);
}

.dashboard-column:nth-child(3) i {
    color: rgb(116, 168, 181);
}

.dashboard-column:nth-child(4) i {
    color: rgb(244, 133, 149);
}

.dashboard-column:nth-child(5) i {
    color: #67c23a;
}

.dashboard-charts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.dashboard-chart {
    box-sizing: border-box;
    width: 49%;
    min-width: 49%;
    padding: 20px;
    height: 500px;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0px 0px 0px 0px rgba(150, 150, 150, 0.35);
    box-shadow: 0px 0px 4px 0px rgba(150, 150, 150, 0.35);

}

.dashboard-chart:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 10px 5px rgba(150, 150, 150, 0.35);
}
</style>